<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>来访人员登记</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-form :inline="true"
               ref="formRef"
               :rules="formRules"
               label-position="top"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="来访人"
                      prop="name">
          <el-input v-model="formInline.name"
                    placeholder="来访人姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话"
                      prop="tel">
          <el-input v-model="formInline.tel"
                    placeholder="来访人电话"></el-input>
        </el-form-item>
        <el-form-item label="被访人">
          <el-input v-model="formInline.visitedName"
                    placeholder="被访人姓名"></el-input>
        </el-form-item>
        <el-form-item label="访问宿舍">
          <el-input v-model="formInline.dorm"
                    placeholder="被访人宿舍"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="formContext"
               label-width="80px">
        <el-form-item label="访问事由">
          <el-input v-model="formContext.matter"
                    type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formContext.remake"
                    type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 @click="upVisit">提交</el-button>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'dormList',
  props: [''],
  data () {
    // 验证手机号
    var checkTel = (rule, value, callback) => {
      // 验证号码的正则表达式
      const telReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(17[0-9]{1}))+\d{8})$/
      if (telReg.test(value)) {
        return callback()
      }
      callback(new Error('请输入正确的手机号码'))
    }
    return {
      formInline: {
        name: '',
        tel: '',
        dorm: '',
        visitedName: ''
      },
      formContext: {
        matter: '',
        remake: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入来访人姓名', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: checkTel, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    upVisit () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$axios.get('/visit/visitUp', {
          params: {
            name: this.formInline.name,
            tel: this.formInline.tel,
            dorm: this.formInline.dorm,
            visitedName: this.formInline.visitedName,
            tower: window.localStorage.getItem('tower'),
            watch: window.localStorage.getItem('name'),
            matter: this.formContext.matter,
            remake: this.formContext.remake
          }
        })
        // console.log(res)
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.formInline = {
            name: '',
            tel: '',
            dorm: '',
            visitedName: ''
          }
          this.formContext = {
            matter: '',
            remake: ''
          }
        } else {
          this.$message.success(res.msg)
        }
      })
    }
  }

}

</script>
<style lang='less' scoped>
.demo-form-inline {
  display: flex;
  .el-form-item {
    flex: 1;
  }
}
.el-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
